<template>
  <view class="header-container" :style="{ paddingTop: top + 'px', background: backgroundColor }">
    <image class="back-btn" @click="back" src="https://www.dingxians.cn/upload/images/common/back.png"></image>
    <slot>
      <view class="title" style="color: white">{{ title }}</view>
    </slot>
    <view :class="[fitWeixin ? 'menu-right' : '']"
          style="min-width: 80rpx; margin-right: 22rpx; text-align: right; color: white">
      <!-- 右侧菜单区域 -->
      <slot name="menu"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'my-header',
  data() {
    return {
      top: 0,
    }
  },
  props: {
    title: String,
    backgroundColor: {
      type: String,
      default: '#000',
    },
    // 是否适配微信小程序
    fitWeixin: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    back() {
      uni.navigateBack({
        fail: () => {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }
      })
    },
  },
  mounted() {
    const { safeArea } = uni.getSystemInfoSync()
    this.top = safeArea.top
  },
}
</script>

<style lang="scss" scoped>
.header-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 750rpx;
  min-height: 88rpx;
  /* background: v-bind(backgroundColor); */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-size: 100% 100%;

  .back-btn {
    margin-left: 22rpx;
    width: 80rpx;
    height: 44rpx;
  }

  .title {
    font-size: 36rpx;
  }

  /* #ifdef MP-WEIXIN */
  .menu-right  {
    margin-right: 180rpx !important;
  }

  /* #endif */

}
</style>
